import React from "react";
import { useDispatch, useSelector } from "react-redux";
import MdEasyCom from ".././MdCom/EasyCom";
import { Button, Card, Empty, Tag } from "antd";
const flexStyle = (props: boolean): React.CSSProperties => ({
  display: "flex",
  justifyContent: props ? "space-around" : "space-between",
});
const ReduxComOne: React.FC = () => {
  const num = useSelector((state: any) => state.num);
  const obj = useSelector((state: any) => state.obj);
  console.log(obj);
  const dispatch = useDispatch();
  const arr = [
    {
      id: 1,
      txt: "将列表组件封装后传值 ---MdEasyCom",
      needDivder: true,
      divderTxt: "get !!",
    },
    {
      id: 2,
      txt:
        "该页面主要展示redux+redux-saga的具体配置方法和普通使用以及内置辅助函数（中间件的概念），配置方式见真的md文件",
      needDivder: false,
    },
    {
      id: 3,
      txt:
        "配置完之后改写class类组件为函数式组件，此时改用hook访问全局状态和调用方法",
      needDivder: false,
    },
    {
      id: 4,
      txt: "useSelector得到了state全局状态，useDispatch用于修改并提交",
      needDivder: true,
      divderTxt: "wow !!!",
    },
    {
      id: 5,
      txt: "实现如下",
      needDivder: true,
      divderTxt: "come on let's go !",
    },
  ];
  const arrElse = [
    {
      id: 1,
      txt: "接下来会认识takeEvery、takeLatest、throttle等saga的内置API使用",
      needDivder: false,
    },
    {
      id: 2,
      txt:
        "具体使用方法和细节可以查看 https://www.bilibili.com/video/BV1aK411L7Ya?p=4 视频",
      needDivder: false,
    },
    {
      id: 3,
      txt: "自己的文档记录于下git仓库地址中的 Redux-saga 辅助函数认识一节",
      needDivder: false,
    },
    {
      id: 4,
      txt:
        " https://gitee.com/xiaohe_heho_heho/changhong/blob/master/react.md ",
      needDivder: false,
    },
    {
      id: 5,
      txt:
        "下面展示了一个数据请求和切换结合空状态的实例，点击三个不同的初始化方法",
      needDivder: false,
    },
  ];
  const mapFn = (e: []) => {
    let divNode = e.map((el: string, i: number) => {
      return (
        <Tag
          color={
            ["cyan", "green", "geekblue", "magenta", "volcano", "red"][
              Math.floor(Math.random() * 5)
            ]
          }
          key={i}
        >
          {el}
        </Tag>
      );
    });
    return divNode;
  };
  return (
    <div>
      <MdEasyCom arr={arr}></MdEasyCom>
      <Card
        title={"会随按钮变动的数字是：" + num}
        style={{ width: 300, margin: "20px 0" }}
      >
        <p>
          <Button
            type="default"
            onClick={() => dispatch({ type: "increment" })}
          >
            增加
          </Button>
        </p>
        <p>
          <Button
            type="default"
            onClick={() => dispatch({ type: "decrement" })}
          >
            减少
          </Button>
        </p>
        <p>Card content</p>
      </Card>

      <MdEasyCom arr={arrElse}></MdEasyCom>
      <Card
        title="redux-saga-辅助函数"
        style={{ width: 600, margin: "20px 0" }}
      >
        {" "}
        <div>
          <span>takeEvery：</span>
          <Button
            type="default"
            onClick={() => dispatch({ type: "takeEvery", query: { id: 1 } })}
            style={{ marginRight: "20px" }}
          >
            初始化
          </Button>

          <span>takeLatest：</span>
          <Button
            type="default"
            onClick={() => dispatch({ type: "takeLatest", query: { id: 5 } })}
            style={{ marginRight: "20px" }}
          >
            初始化
          </Button>

          <span>throttle：</span>
          <Button
            type="default"
            onClick={() => dispatch({ type: "throttle", query: { id: 3 } })}
            style={{ marginRight: "20px" }}
          >
            初始化
          </Button>
        </div>
      </Card>
      <Card title="数据返回" style={{ width: 600, margin: "20px 0" }}>
        {obj === undefined ? (
          <Empty />
        ) : (
          <Card title={"name: " + obj.name}>
            <h1>ip: {obj.ip}</h1>
            <div>tag: {mapFn(obj.resources)}</div>
          </Card>
        )}
        {/* <div>{obj.ip}</div> */}
      </Card>
      <div style={flexStyle(true)}>
        <div>1</div>
        <div>2</div>
      </div>
    </div>
  );
};

export default ReduxComOne;
